<template>
  <el-breadcrumb separator="/" class="header-breadcrumb">
    <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :to="{ path: item.path }">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>

</template>

<script>
import {useRoute} from "vue-router";
import {onMounted, watch, ref} from "vue";

export default {
  name: "mine-breadcrumb",
  setup() {
    const breadcrumbList = ref([])
    const route = useRoute()
    const initBreadcrumb = () => {
      //获取菜单对应的路由信息
      breadcrumbList.value = route.matched;
    }
    onMounted(() => {
      initBreadcrumb()
    })
    watch(() => route.matched, (newVal, oldVal) => {
      breadcrumbList.value = newVal;
    })
    return {
      breadcrumbList
    }
  }
}
</script>

<style scoped>

</style>
